<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Duty } from '../../api/Security/index'


const tableData = ref([])

const getData = async () => {
    let res = await Duty()
    tableData.value = res.data.data.result[0]
}

onMounted(() => {
    getData()
})
</script>

<template>
    <div class="left-Bottom">
        <div class="left-Bottom-img">
            <span style="padding: 10px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">值班情况</span>
        </div>
        <div class="left-Bottom-bottom">
            <el-table :data="tableData"
                style="width: 99.97%;--el-table-border-color: none;border-right: 1px #143275 solid;border-left: 1px #143275 solid;border-bottom: 1px #143275 solid;"
                :highlight-current-row="false"
                :header-cell-style="{ backgroundColor: '#143275', color: '#ffffff', fontSize: '14px', textAlign: 'center', borderLeft: '0.5px #154480 solid', borderBottom: '1px #154480 solid' }"
                :cell-style="{ color: '#fff', fontSize: '14px', textAlign: 'center', borderBottom: '0.5px #143275 solid', borderLeft: '0.5px #143275 solid' }"
                :row-style="{ color: '#fff', fontSize: '14px', textAlign: 'center', }" empty-text="暂无数据"
                max-height="818">
                <el-table-column prop="eegs_id" label="序号" />
                <el-table-column prop="eegs_name" label="姓名">
                    <template #default="scope">
                        <p>{{ scope.row.eegs_name }}</p>
                        <p>{{ scope.row.eegs_phone }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="eegs_time" label="时间" />
                <el-table-column prop="eegs_dutyContent" label="值班内容" />
            </el-table>
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-Bottom {
    width: 28rem;
    height: 20rem;
    margin: 0 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/leftImg.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 20rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);

    }
}

/*  
// 表格部分样式
 // 最外层透明 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
    background-color: transparent;
    color: #93dcfe;
    font-size: 24px;
}

/* 表格内背景颜色  */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: transparent;
    border: 0px;
    color: #93dcfe;
    font-size: 24px;
    height: 5px;
    font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
    font-weight: Normal;
}

/* // 去掉最下面的那一条线  */
.el-table::before {
    height: 0px;
}

/* // 设置表格行高度 */
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
    padding: 0;
    height: 54px;
}

/* // 修改高亮当前行颜色 */
::v-deep .el-table tbody tr:hover>td {
    background: #063570 !important;
}

/* // 取消当前行高亮 */
::v-deep .el-table tbody tr {
    pointer-events: none;
}

/* 修改表头样式-加边框 */
/* ::v-deep .el-table__header-wrapper {
  border: solid 1px #04c2ed;
} */

/* // 表格斑马自定义颜色 */
::v-deep .el-table__row.warning-row {
    background: #01205A;
}


/* 去掉表格里的padding */
::v-deep .el-table .cell,
.el-table th div {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>